<template>
  <div >
    <el-container>
          <!--顶部菜单条-->
          <el-header v-if="showHeader">
            <el-menu mode="horizontal" background-color="#fff" text-color="#000"
                     active-text-color="#0aa1ed" :default-active="useRouter()" style="position:relative;" router>
              <el-menu-item index="/shoppingMall">商城</el-menu-item>
              <el-menu-item index="/article">文章</el-menu-item>
              <el-menu-item index="/order">订单</el-menu-item>
              <el-menu-item index="/OMV" v-if="showAdmin">后台管理</el-menu-item>
<!--              <el-menu-item index="/merchantLogin" v-if="showAdmin">更新商品</el-menu-item>-->
<!--              <el-menu-item index="/merchantLogin"  v-if="showAdmin">注册商户</el-menu-item>-->
              <el-menu-item index="/userLogin" style="position: absolute;right:20px;" v-if="islogin">用户登陆</el-menu-item>
              <el-dropdown trigger="click" style="position: absolute;right:20px;" v-else>
              <span style="font-size:19px;font-weight: bold;">
                {{userLoginForm.username}}
                <el-icon><arrow-down/></el-icon>
              </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-menu>
          </el-header>
          <el-main>
          <router-view/>
          </el-main>
          <el-footer style="background-color: #282c30;color: #666;height: 200px;padding-top:40px; text-align:center;">
            <p>Copyright © 达内金桥科技有限公司版权所有 京ICP备1145141919810号-3 京公网安备 1101201191234567号</p>
            <p>abaaba</p>
            <p>红红火火恍恍惚惚</p>
          </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
//控制头部菜单的显示与隐藏
const showHeader = ref(true);
//控制商户后台菜单的显示与隐藏
const showAdmin = ref(false);

const islogin = ref(true);
//获取用户信息
const userLoginForm = ref(getUser());


const router = useRouter();
//监听路由的变化,如果发生了改变
router.beforeEach((to, from, next)=>{
  console.log(userLoginForm.value)
  //进行路由跳转
  next();
})
onMounted (()=>{
  //获取当前路由
  const route = useRoute()

  //判断用户是否是商户
  if (userLoginForm.value == null || !userLoginForm.value.isAdmin){
    showAdmin.value = false;
  }else{
    showAdmin.value = true;
  }
  //判断用户是否登录
  if (userLoginForm.value != null){
    islogin.value = false;
  }
})

//定义一个退出登录的方法
const logout = ()=>{
  if(confirm('您确认要退出登录吗?')){
    //退出时要清空用户数据
    localStorage.removeItem('user');
    // //退出后要去到登录页
    // window.location.href = '/userLogin';
    //也需要把已经取出来的user对象清空
    userLoginForm.value = '';
    islogin.value = true;
    showAdmin.value = false;
  }
}
</script>
